<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易抽奖</title>
    <meta name="keywords" content="抽奖,在线抽奖,在线抽奖软件,在线摇奖软件,免费抽奖软件下载,免费摇奖软件,幸运随机抽奖软件,年会抽奖软件,在线摇奖机,星空抽奖软件">
    <meta name="description" content="简易的基于网页的抽奖页面，手动开启手动停止，自定义奖池，自定义奖品中奖概率。">
    <!-- <link rel="stylesheet" type="text/css" href="/resource/semantic.min.css"> -->
    <link href="https://cdn.bootcdn.net/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet">
    <link rel="icon" href="/favicon.svg">
</head>

<body>
    <div class="ui center aligned container" style="padding-top: 3em;">
        <!-- 标题 -->
        <h1 class="ui icon header" id="title">
            <i class="hand peace outline icon" id="title-icon"></i>
            <div class="content" id="title-text">
                Who is the lucky person
            </div>
        </h1>
        <!-- 主体 -->
        <div class="ui raised segments">
            <div class="ui segment">
                <!-- 这里可以修改每行有几个获奖卡片 -->
                <div class="ui four column grid" id="prizePool">
                </div>
            </div>
            <div class="ui secondary segment">
                <!-- 按钮 -->
                <button class="ui button primary" id="controlButton">开始抽奖</button>
                <button class="ui icon button" onclick="showSetSettingsPanel()"><i class="cog icon"></i></button>
                <button class="ui icon button" onclick="showSetSkinPanel()"><i class="images icon"></i></button>
            </div>
        </div>
        <!-- 版权 -->
        <div>
            <p>本程序仅供学习交流使用，禁止用作违法用途。</p>
            <div class="ui label">
                <i class="github icon"></i>
                <a class="detail" href="https://github.com/xfzka/simple-lottery">Github</a>
            </div>
            <div class="ui label">
                Made for
                <div class="detail">kk</div>
            </div>
        </div>
    </div>

    <div class="ui modal" id="setPrizePool">
        <i class="close icon"></i>
        <div class="header">设置</div>
        <div class="scrolling content">
            <div class="ui form">
                <h3 class="ui header">标题设置</h3>
                <div class="field">
                    <div class="ui toggle checkbox">
                        <input type="checkbox" class="hidden" name="showTitleText">
                        <label>显示标题</label>
                    </div>
                    <div class="ui toggle checkbox">
                        <input type="checkbox" class="hidden" name="showTitleIcon">
                        <label>显示图标</label>
                    </div>
                </div>
                <div class="field">
                    <label>标题内容</label>
                    <input type="text" name="titleText" autofocus>
                </div>
                <div class="ui divider"></div>
                <h3 class="ui header">奖池设置</h3>
                <div class="ui message">
                    <div class="header">
                        奖池设置说明
                    </div>
                    <ul class="list">
                        <li> 每行一个奖品，格式为：
                            <div class="ui mini green label">奖品名称</div>
                            <div class="ui mini red label">空格</div>
                            <div class="ui mini blue label">获奖几率</div>如：铅笔 10
                        </li>
                        <li>
                            <div class="ui mini blue label">获奖几率</div>
                            必须为整数，且无上限，可无限大9999，也可为1，必须使用
                            <div class="ui mini red label">空格</div>
                            分割获奖几率
                        </li>
                        <li>
                            <div class="ui mini blue label">获奖几率</div>
                            为0或者为负数时，则奖品永不会中奖，但依然在界面上显示
                        </li>
                        <li>为了美观，奖品数量最好为 3 或 4 的倍数，即 6、8、9 等个奖品</li>
                    </ul>
                </div>
                <div class="field">
                    <textarea id="prizePoolText"></textarea>
                </div>
            </div>
        </div>
        <div class="actions">
            <div class="ui cancel button">取消修改</div>
            <div class="ui ok green button">保存设置</div>
        </div>
    </div>

    <div class="ui modal" id="setSkin">
        <i class="close icon"></i>
        <div class="header">设置背景图</div>
        <div class="content">
            <div class="ui four column grid" id="skinImgContainer">
                <div class="column">
                    <div class="ui segment noneBg">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- <script src="/resource/jquery-3.5.1.min.js"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- <script src="/resource/semantic.min.js"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>

    <script src="/main.js"></script>
    <link href="/main.css" rel="stylesheet">
</body>

</html>
